<template>
  <div class="shop_index">
    <div class="search">
        <v-search v-model="searchValue"
                  placeholder="请输入搜索关键词"
                  shape="round"
                  clearable
                  @search="onSearch"/>
    </div>
    <div class="swiper_wrapper">
        <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
          <block v-for="(item, index) in images" :key="index">
            <swiper-item>
              <image :src="item.url" class="slide-image" mode="aspectFill"/>
            </swiper-item>
          </block>
        </swiper>
    </div>
    <div class="category_wrapper">
      <div span="24" class="category">
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-chaoshi" ></i></li>
          <li class="title">超市</li>
        </ul>
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-shuma" ></i></li>
          <li class="title">数码</li>
        </ul>
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-xingzhuang39" ></i></li>
          <li class="title">服饰</li>
        </ul>
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-zhuanqian" ></i></li>
          <li class="title">生鲜</li>
        </ul>
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-daojia" ></i></li>
          <li class="title">到家</li>
        </ul>
      </div>
      <div class="category">
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-chongzhi" ></i></li>
          <li class="title">充值</li>
        </ul>
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-pingoushouyeshj-icon-Overse" ></i></li>
          <li class="title">拼购</li>
        </ul>
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-lingquan" ></i></li>
          <li class="title">领券</li>
        </ul>
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-zhuanqian" ></i></li>
          <li class="title">赚钱</li>
        </ul>
        <ul class="icon_list">
          <li class="icon_wraper"><i class="icon iconfont icon-huiyuan" ></i></li>
          <li class="title">会员</li>
        </ul>
      </div>
    </div>
    <div class="spaceBetween marginTop35">
      <span class="title">精选管区</span>
      <span class="right_arrow">查看更多></span>
    </div>
    <ul class="goods_choose">
      <li class="good_list">
        <div class="category_img">
          <img src="../../../static/images/index/oil.jpg" alt="">
        </div>
        <div class="category_title">橄榄油</div>
      </li>
      <li class="good_list">
        <div class="category_img">
          <img src="../../../static/images/index/oil.jpg" alt="">
        </div>
        <div class="category_title">橄榄油</div>
      </li>
      <li class="good_list">
        <div class="category_img">
          <img src="../../../static/images/index/oil.jpg" alt="">
        </div>
        <div class="category_title">橄榄油</div>
      </li>
      <li class="good_list">
        <div class="category_img">
          <img src="../../../static/images/index/oil.jpg" alt="">
        </div>
        <div class="category_title">橄榄油</div>
      </li>
      <li class="good_list">
        <div class="category_img">
          <img src="../../../static/images/index/oil.jpg" alt="">
        </div>
        <div class="category_title">橄榄油</div>
      </li>
      <li class="good_list">
        <div class="category_img">
          <img src="../../../static/images/index/oil.jpg" alt="">
        </div>
        <div class="category_title">橄榄油</div>
      </li>
      <li class="good_list">
        <div class="category_img">
          <img src="../../../static/images/index/oil.jpg" alt="">
        </div>
        <div class="category_title">橄榄油</div>
      </li>
      <li class="good_list">
        <div class="category_img">
          <img src="../../../static/images/index/oil.jpg" alt="">
        </div>
        <div class="category_title">橄榄油</div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        searchValue: '',
        images: [
          {
            url: 'https://img-oss.yunshanmeicai.com/goods/default/31d8dfa4-0d7b-4694-80f9-41b07c9d0a3a.png'
          },
          {
            url: 'https://img-oss.yunshanmeicai.com/goods/default/e83c8f0f-4acc-4729-bcbb-294f2b314977.jpg'
          }
        ]
      }
    },

    components: {},

    methods: {
      onSearch (item) {
        console.log(item)
      },
      onCancel (item) {
        console.log(item)
      }
    },

    created () {
    }
  }
</script>

<style lang="less">
  .shop_index{
    width: 100%;
    height: 100%;
    .search{
      width: 100%;
      height: 85rpx;
      .van-search{
        padding: 3px 16px;
      }
    }
    .swiper_wrapper{
      width: 100%;
      height: 280rpx;
      .swiper{
        width: 100%;
        height: 100%;
      }
      .slide-image{
        width: 100%;
        height: 100%;
      }
    }
    .category_wrapper{
      width: 100%;
      height: 220rpx;
      .category{
        width: 100%;
        height: 45%;
        display: flex;
        justify-content: space-between;
        align-items:  center;
        margin-top: 3%;
        .icon_list{
          flex: 1;
          height: 100%;
          .icon_wraper{
            width: 100%;
            height: 70%;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon{
              font-size: 65rpx;
            }
          }
          .title{
            height: 30%;
            text-align: center;
            font-size: 30rpx;
          }
        }
      }
    }
    .spaceBetween{
      .title{
        font-size: 30rpx;
        padding-left: 30rpx;
        color: #363737
      }
      .right_arrow{
        padding-right: 30rpx;
        font-size: 26rpx;
        color: #363737
      }
    }
    .goods_choose{
      width: 100%;
      height: 410rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .good_list{
        width: 24%;
        height: 50%;
        margin: 0 0.5% 0 0.5%;
        .category_img{
          width: 100%;
          height: 70%;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 85%;
            height: 85%;
          }
        }
        .category_title{
          width: 100%;
          height: 30%;
          font-size: 30rpx;
          text-align: center;
        }
      }
    }
  }
</style>
